<template>
  <div class="container fixed invest backgroundColor">
    <Header
      :showBack="false"
      @right="right"
      :background="{background:'#292a3a'}"
      :showRightText="true"
      content="MOE"></Header>
    <div class="backgroundColor">
      <scroller
        :pulldown-config="{content: '下拉刷新',downContent: '下拉刷新',upContent: '释放刷新'}"
        :pullup-config="{content: '上拉加载',downContent: '松开加载',upContent: '上拉加载'}"
        lock-x
        height="-95"
        ref="invest"
        @on-pullup-loading="onScrollBottom()"
        :use-pullup="true"
        :use-pulldown="true"
        @on-pulldown-loading="onScrollTop()"
      >
        <div>
          <div class="swiper-container" ref="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="item in bannerList">
                <img :src="item.thumb" alt="" style="width: 100%;">
              </div>
            </div>
            <div class="swiper-pagination" v-if="bannerList.length>1"></div>
          </div>
          <div class="noticeListStyle flexLeft">
            <img src="../assets/img/onticeIndex.png" alt="" style="margin-right: 10px;width: 16px;">
            <div style="height: 100%;width:calc(100% - 36px)">
              <NewsIndex :items="noticeList"></NewsIndex>
              <!--<div v-for="item in noticeList">{{item.title | sliceStr}}</div>-->
            </div>
          </div>
          <div  class="investdWrap">
            <div
              v-for="item in recordList"
              class="investItem"
              @click="goTo({name:'investDetail',params:{id:item.iid}})">
              <img src="../assets/img/topCircle.png" alt="" style="position: absolute;left: 60%;top:0">
              <img src="../assets/img/leftCircle.png" alt="" style="position: absolute;left: 0;top:54px;">
              <img src="../assets/img/rightCircle.png" alt="" style="position: absolute;right: 0px;bottom: 0;">
              <div class="flexLeft" style="margin-bottom: 10px;">
                <img
                  :src="item.areaicon"
                  alt=""
                  style="width: 28px;height: 28px;margin-right: 8px;">
                <span>{{item.title}}第{{item.turns}}轮</span>
              </div>
              <div class="flex">
                <div>
                  <countup
                    :end-val="Number(item.rate)"
                    :duration="0.7"
                    :decimals="2"
                    style="color:#F5646E;"
                    class="font18"></countup>
                  <span class="font14" style="color:#F5646E;">%</span>
                  <br>
                  <span style="color:#BBBBC0;" class="font12">预计利率</span>
                </div>
                <div>
                  <countup
                    :end-val="Number(item.total)"
                    :duration="0.7"
                    :decimals="2"
                    style="color:#fff;"
                    class="font17"></countup>
                  <!--<span style="color:#fff;" class="font20">{{item.total}}</span>-->
                  <br>
                  <span style="color: #BBBBC0;" class="font12">目标筹集<span> {{item.areamark}}</span></span>
                </div>
                <div>
                  <span style="color:#fff;" class="font17">{{item.total | sub(item.raised)}}</span><br>
                  <span style="color: #BBBBC0;" class="font12">剩余可投<span> {{item.areamark}}</span></span>
                </div>
              </div>
              <div style="margin: 15px 0 10px 0;">
                <Progress :percent="item.raised | numDiv(item.total)" :show-cancel="false"></Progress>
              </div>
              <div class="font12" style="text-align: right">
                <span style="color:#BBBBC0">距离
                  <span v-if="item.nowtimestamp>item.starttimestamp"
                        style="color:rgb(245, 100, 110);">
                    截止
                  </span>
                  <span v-if="item.nowtimestamp<item.starttimestamp"
                        style="color: #14BE75;">
                    开始
                  </span>
                  还剩：
                </span>
                <span style="color:#FFFFFF;">
                <span v-if="item.starttimestamp > item.nowtimestamp">{{(item.starttimestamp - item.nowtimestamp) | time}}</span>
                <span v-if="item.starttimestamp < item.nowtimestamp">{{(item.endtimestamp - item.nowtimestamp) | time}}</span>
              </span>
              </div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
  import Header from './common/header.vue';
  import Progress from './common/progress.vue';
  import NewsIndex from './common/newsIndex.vue';
  import {Scroller,Countup} from 'vux'
  import Swiper from 'swiper';
  import 'swiper/dist/css/swiper.min.css';
  export default {
    data(){
      return {
        show:false,
        recordList:[],
        percent:80,
        onFetching1:false,
        onFetching:false,
        bannerList:[],
        timer:null,
        noticeList:[],
        x:'',
        mySwiper:'',
      }
    },
    beforeDestroy(){
      clearInterval(this.timer);
    },
    methods:{
      right(){
        this.$router.push('/rules');
      },
      goTo(path){
        this.$router.push(path);
      },
      onScrollTop(){
        if (this.onFetching1) {
        } else {
          this.onFetching1 = true;
          this.recordList = [];
          this.promiseNewList();
        }
      },
      onScrollBottom () {
        if (this.onFetching) {} else {
          this.onFetching = true;
          var that = this;
//          this.newest();
        }
      },
      promiseNewList(){
        this.loading(true);
        clearInterval(this.timer)
        Promise.all([this.service('newest',{},'get'), this.service('list',{},'get'),this.service('noticeList',{pageno:1,})]).then(
          (res) => {
            if(this.mySwiper){
              this.mySwiper.destroy(true);
            }
            this.loading(false);
            this.recordList = res[0].data.list;
            this.bannerList = res[1].data.list;
            this.noticeList = res[2].data.list;
            this.$nextTick(() => {
              this.$refs.invest.donePulldown();
              this.$refs.invest.disablePullup();
//              this.$refs['swiper-container'].style.height = this.x + 'px';
              this.mySwiper = new Swiper('.swiper-container', {
                slidesPerView: 'auto',
                loop:false,
                pagination: {
                  el: '.swiper-pagination',
                }
              })
            })
            this.onFetching = false;
            this.onFetching1 = false;
            this.timer = setInterval(res=>{
              this.newest()
            },5000)
          }
        ).catch(
          (err) => {
            console.log(err)
          }
        )
      },
      newest(){
        this.service('newest',{},'get').then((res)=>{
          this.recordList = res.data.list;
        });
      }
    },
    mounted(){
//      x = 屏幕的宽度*430/750
      var w = document.documentElement.clientWidth || document.body.clientWidth;
      this.x = w*430/750;
      this.$nextTick(()=>{
        this.$refs['swiper-container'].style.height = this.x + 'px';
//        var mySwiper = new Swiper('.swiper-container', {
//          slidesPerView: 'auto',
//          loop:false,
//          pagination: {
//            el: '.swiper-pagination',
//          }
//        })
      })
      this.onScrollTop();
    },
    components: {
      Progress,
      Header,
      Scroller,
      Countup,
      NewsIndex
    }
  }
</script>
<style>
  .invest .swiper-container {
    width: 100%;
  }
  .investdWrap{
    margin:0 10px;
  }
  .investItem{
    padding:10px 10px;
    background: #454555;
    margin-bottom: 10px;
    border-radius: 4px;
    position: relative;
  }
  .noticeListStyle{
    height: 35px;
    font-size: 15px;
    line-height: 35px;
    padding: 0 10px;
    overflow: hidden;
    background: -webkit-linear-gradient(left,
      rgba(0,0,0,0.2),
      rgba(0,0,0,0.4),
      rgba(0,0,0,0.2));
    background: -o-linear-gradient(right,
      rgba(0,0,0,0.2),
      rgba(0,0,0,0.4),
      rgba(0,0,0,0.2));
    background: -moz-linear-gradient(right,
      rgba(0,0,0,0.2),
      rgba(0,0,0,0.4),
      rgba(0,0,0,0.2));
    background: linear-gradient(to right,
      rgba(0,0,0,0.2),
      rgba(0,0,0,0.4),
      rgba(0,0,0,0.2));
    margin-bottom: 20px;
  }
</style>
